<template>
  <div>
    <div class="item-line">
      <div>输入变量</div>
      <div
        v-if="data.inputList && data.inputList.length > 0"
        class="param-item"
      >
        <div class="param-name">变量名称</div>
        <div class="param-source">变量来源</div>
        <div class="param-operate">操作</div>
      </div>
      <div
        v-for="(param, index) in data.inputList"
        :key="index"
        class="param-item">
        <div class="param-name">
          <ac-input v-model="param.name" />
        </div>
        <div class="param-source">
          <ac-select
            v-model="param.sourceParamId"
            :options="sourceParamOptions"
          />
        </div>
        <div class="param-operate">
          <ac-icon
            size="14"
            color="red"
            iconId="018dc9c3efd3a0502886"
            title="删除"
            @click.stop="deleteParam('inputList', index)"
          />
        </div>
      </div>
    </div>
    <div class="button-box">
      <div class="button" @click="addParam('inputList')">
        <ac-icon iconId="018dca3b4707c4c43a2f" size="16" /> 添加变量
      </div>
    </div>
    <div class="item-line">
      <div>API</div>
      <div class="param-item">
        <div style="width: 100px">
          <ac-select v-model="data.method" options="POST,GET,PUT,DELETE" />
        </div>
        <div style="flex-grow: 1">
          <el-input v-model="data.url" v-suggest="options" placeholder="API地址，输入“/”可以选择变量" />
        </div>
      </div>
    </div>
    <div class="item-line">
      <div>请求头</div>
      <div
        v-if="data.headerList && data.headerList.length > 0"
        class="param-item"
      >
        <div class="param-name">参数名</div>
        <div class="param-source">参数值</div>
        <div class="param-operate">操作</div>
      </div>
      <div
        v-for="(param, index) in data.headerList"
        :key="index"
        class="param-item"
      >
        <div class="param-name">
          <ac-input v-model="param.name" />
        </div>
        <div class="param-source">
          <el-input v-model="param.value" v-suggest="options" placeholder="输入“/”可以选择变量" />
        </div>
        <div class="param-operate">
          <ac-icon
            size="14"
            color="red"
            iconId="018dc9c3efd3a0502886"
            title="删除"
            @click.stop="deleteParam('headerList', index)"
          />
        </div>
      </div>
    </div>
    <div class="button-box">
      <div class="button" @click="addParam('headerList')">
        <ac-icon iconId="018dca3b4707c4c43a2f" size="16" /> 添加参数
      </div>
    </div>
    <div class="item-line">
      <div>请求参数</div>
      <div
        v-if="data.paramList && data.paramList.length > 0"
        class="param-item"
      >
        <div class="param-name">参数名</div>
        <div class="param-source">参数值</div>
        <div class="param-operate">操作</div>
      </div>
      <div
        v-for="(param, index) in data.paramList"
        :key="index"
        class="param-item"
      >
        <div class="param-name">
          <ac-input v-model="param.name" />
        </div>
        <div class="param-source">
          <el-input v-model="param.value" v-suggest="options" placeholder="输入“/”可以选择变量" />
        </div>
        <div class="param-operate">
          <ac-icon
            size="14"
            color="red"
            iconId="018dc9c3efd3a0502886"
            title="删除"
            @click.stop="deleteParam('paramList', index)"
          />
        </div>
      </div>
    </div>
    <div class="button-box">
      <div class="button" @click="addParam('paramList')">
        <ac-icon iconId="018dca3b4707c4c43a2f" size="16" /> 添加参数
      </div>
    </div>
    <div class="item-line">
      <div>请求体</div>
      <div class="param-item">
        <ac-select v-model="data.bodyType" options="none,json,form-data,x-www-form-urlencoded,raw" />
      </div>
      <div class="param-item" v-if="data.bodyType === 'raw'">
        <el-input v-model="data.body" :rows="5" type="textarea" />
      </div>
    </div>
    <div class="item-line">
      <div>输出变量</div>
      <div
        v-if="data.outputList && data.outputList.length > 0"
        class="output-item"
      >
        <div class="output-type">变量类型</div>
        <div class="output-name">变量名称</div>
        <div class="output-operate">操作</div>
      </div>
      <div
        v-for="(param, index) in data.outputList"
        :key="index"
        class="output-item"
      >
        <div class="output-type">
          <ac-select
            v-model="param.type"
            options="文本,数字,数组,图片,文件"
            :disabled="param.builtin"
          />
        </div>
        <div class="output-name">
          <ac-input v-if="param.builtin" v-model="param.name" :disabled="param.builtin" />
          <ac-input v-else v-model="param.name" placeholder="以“result.”开头获取请求返回结果子项" />
        </div>
        <div class="output-operate">
          <ac-icon
            v-if="!param.builtin"
            size="14"
            color="red"
            iconId="018dc9c3efd3a0502886"
            title="删除"
            @click.stop="deleteParam('outputList', index)"
          />
        </div>
      </div>
    </div>
    <div class="button-box">
      <div class="button" @click="addParam('outputList')">
        <ac-icon iconId="018dca3b4707c4c43a2f" size="16" /> 添加变量
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import tool from "@/utils/tool";

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        inputList: [],
        headerList: [],
        paramList: [],
        outputList: []
      }
    }
  },
  sourceParamOptions: {
    type: Object,
    default: () => {}
  }
});

const data = ref(props.data);

const addParam = (listName) => {
  if (!data.value[listName]) {
    data.value[listName] = [];
  }
  data.value[listName].push({id: tool.uuid()});
};

const deleteParam = (listName, index) => {
  data.value[listName].splice(index, 1);
};

const options = computed(() => {
  return (data.value.inputList || [])
    .filter(item => item.name)
    .map(item => ({key: `{{${item.name}}}`, value: item.name}));
});
</script>

<style scoped>
.item-line {
  margin-top: 15px;
  >div:first-child {
    margin-bottom: 5px;
  }
}
.param-item {
  margin-top: 5px;
  display: flex;
  flex-direction: row;
  .param-name {
    width: 200px;
    flex-shrink: 0;
  }
  .param-source {
    flex-grow: 1;
  }
  .param-operate {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .ac-icon {
      cursor: pointer;
    }
  }
}
.output-item {
  margin-top: 5px;
  display: flex;
  flex-direction: row;
  .output-type {
    width: 100px;
    flex-shrink: 0;
  }
  .output-name {
    flex-grow: 1;
  }
  .output-operate {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .ac-icon {
      cursor: pointer;
    }
  }
}
.button-box {
  margin-top: 10px;
  display: flex;
  align-items: center;
  .button {
    color: #67C23A;
    cursor: pointer;
    display: flex;
    align-items: center;
    .ac-icon {
      margin-right: 8px;
    }
  }
}
.inline {
  display: flex;
}
.input-name {
  margin-top: 5px;
  cursor: pointer;
  text-indent: 14px;
}
</style>